import React , { Component } from 'react';
import { StyleSheet, Text, View, Button, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { StackNavigator, TabNavigator } from 'react-navigation';
import  Home  from './home.js';
import  Products  from './products.js';

// tab组装页面
Home.navigationOptions = {
        title:'welcome',
        tabBarLabel: '首页',
        tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons
                name={focused ? 'ios-home' : 'ios-home-outline'}
                size={26}
                style={{ color: tintColor, }}
            />
        ),
        tabBarOnPress:tabBarOnPress
};

Products.navigationOptions = {
        title:'here',
        tabBarLabel: '产品',
        tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons
                name={focused ? 'ios-bulb' : 'ios-bulb-outline'}
                size={26}
                style={{ color: tintColor, }}
            />
        ),
        tabBarOnPress:tabBarOnPress
};

//tab组装
export const Tabs = {
    Home: {screen: Home },
    Products: {screen: Products },
}

var tabBarOnPress = (tab, jumpToIndex) => {
            console.log('tabBarOnPress', tab);
            if (!tab.focused) {
                jumpToIndex(tab.index)
            } else {
                // It works here no problem
                // props.navigation.state.params.handleTabBarPress(tab)
            }
        };

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
